<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../js/layui/layui.js" ></script>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/axios.js" ></script>
		<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body>
	<div id="app">
		<main>

			<section class="infoBox picBg">
				<div class="container" >
					<ul class="list whiteBg radius20" v-for="gap in GapList" style="margin-top: 20px" @click="gapDetail(gap.managerPower.id,gap.gym.status)">
						<li class="listItem clearfix">
							<div class="icon icon1"></div>
							<div class="text">{{gap.gym.name}}<span v-show="gap.gym.status==0">(审核中)</span></div>
							<button @click.stop="editGymInfo(gap.managerPower.powerlevel,gap.gym.id)">修改详情</button>
							<button @click.stop="deleteGym(gap.managerPower.powerlevel,gap.gym.id)">删除</button>
						</li>
						<li class="listItem clearfix">
							<div class="icon icon2"></div>
							<div class="text">{{gap.powerName}}</div>
						</li>
					</ul>
				</div>
				<br>
				<br>
				<br>
				<br>
				<div class="asideBox">
					<div class="container">
						<a class="asideBtn" @click="add">申请新场馆</a>
					</div>
				</div>
			</section>
		</main>
	</div>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
	</body>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			GapList:[]
		},
		methods:{
			loadMyGym(){
				axios.get("/manage/myGymList").then(function (res) {
					if (res.data==="") location.href = "/managerclient/login.html"
					else app.GapList = res.data
				})
			},
			gapDetail(id,status){
				if (status===0) layer.msg("当前场馆还在审核中，无法编辑")
				else location.href = "/managerclient/gapDetail.html?gapId="+id;
			},
			editGymInfo(powerlevel,gid){
				if (powerlevel<3) layer.msg("对不起，目前您暂无权限")
				else location.href = "/managerclient/gymDetail.html?gid="+gid;
			},
			add(){
				location.href = "/managerclient/gymAdd.html"
			},
			deleteGym(powerlevel,gid){
				if (powerlevel<3) layer.msg("对不起，目前您暂无权限")
				axios.delete("/gym/delete/"+gid).then(function (res) {
					if (res.data==="success"){
						layer.msg("删除成功")
						app.loadMyGym();
					}
				})
			}
		},
		created(){
			this.loadMyGym();
		}
	})
</script>
</html>